<template>
  <view class="content-contact">
    <template v-for="(item, index) in users" :key="index">
      <view
        class="contact-item px-[30rpx] py-[20rpx] box-border module-part h-[220rpx] mb-[20rpx] flex flex-row items-center"
      >
        <view>
          <image
            :src="item.avatar"
            mode="aspectFit"
            class="w-[180rpx] h-[180rpx] rounded-[16rpx] mr-[30rpx]"
          />
        </view>
        <view class="grow flex flex-col justify-around">
          <view
            class="text-[#222222] text-[32rpx] flex flex-row justify-between items-center mb-[20rpx]"
          >
            <view>{{ item.name }}</view>
            <view>
              <image
                src="@/static/images/icon-call.png"
                mode="aspectFit"
                class="w-[40rpx] h-[40rpx] mr-[40rpx]"
              />
              <image
                src="@/static/images/iocn-msg.png"
                mode="aspectFit"
                class="w-[40rpx] h-[40rpx]"
              />
            </view>
          </view>
          <view class="text-[#666666] text-[24rpx]">
            <view>
              <text class="mr-[20rpx]" v-if="item.unit">{{ item.unit }}</text>
              <text>{{ item.identify }}</text>
            </view>
            <view class="pt-[15rpx]">电话：{{ item.phone }}</view>
          </view>
        </view>
      </view>
    </template>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";

const users = reactive([
  {
    name: "张三",
    avatar:
      "https://img0.baidu.com/it/u=1069774655,179634375&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1741971600&t=d3027bd53ca9b07e47e2ec4f02b8e0cf",
    unit: "九龙坡人民法院",
    identify: "法官",
    phone: "13996659496",
  },
  {
    name: "王雯雯",
    avatar:
      "https://img0.baidu.com/it/u=1069774655,179634375&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1741971600&t=d3027bd53ca9b07e47e2ec4f02b8e0cf",
    unit: "九龙坡人民法院",
    identify: "法官助理",
    phone: "13996659496",
  },
  {
    name: "吕慧仪",
    avatar:
      "https://img0.baidu.com/it/u=1069774655,179634375&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1741971600&t=d3027bd53ca9b07e47e2ec4f02b8e0cf",
    unit: "九龙坡人民法院",
    identify: "法官",
    phone: "13996659496",
  },
  {
    name: "张三",
    avatar:
      "https://img0.baidu.com/it/u=1069774655,179634375&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1741971600&t=d3027bd53ca9b07e47e2ec4f02b8e0cf",
    unit: "",
    identify: "被告",
    phone: "13996659496",
  },
]);
</script>

<style lang="scss" scoped>
.content-contact {
  .contact-item:last-child {
    margin-bottom: 0;
  }
}
</style>
